{extend name="admin@public/base" /}
{block name="main-content"}
<link rel="stylesheet" href="__PUBLIC__/bootstrap-select/css/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/assets/css/bootstrap-multiselect.min.css">
<!-- 下拉多选框 -->
<script src="__PUBLIC__/bootstrap-select/js/bootstrap-multiselect.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/bootstrap-select/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/assets/js/bootstrap-multiselect.min.js"></script>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/jQuery-Validation-Engine-2.6.2-ciaoca/css/validationEngine.jquery.css">
<script type="text/javascript" src="__PUBLIC__/jQuery-Validation-Engine-2.6.2-ciaoca/js/jquery.validationEngine-zh_CN.js"></script>
<script type="text/javascript" src="__PUBLIC__/jQuery-Validation-Engine-2.6.2-ciaoca/js/jquery.validationEngine.min.js"></script>
<!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
     <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  <![endif]-->
<div class="page-content">
    <!--主题-->
    <div class="page-header">
        <h1>
            您当前操作
            <small>
                <i class="ace-icon fa fa-angle-double-right"></i>
                添加系统管理员
            </small>
        </h1>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <form class="form-horizontal adminform" name="admin_list_add" method="post" action="{:url('admin/Admin/admin_runadd')}" onsubmit="before_deal();">

                <div class="form-group">
                    <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 登录用户名：  </label>
                    <div class="col-sm-10">
                        <input type="text" name="user_name" id="user_name" autocomplete="off" placeholder="输入登录用户名" class="col-xs-10 col-sm-5 validate[required]"/>
                        <span class="lbl col-xs-12 col-sm-7"><span class="red">*</span>必填</span>
                    </div>
                </div>
                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 手机号码：  </label>
                    <div class="col-sm-10">
                        <input type="number" name="phone" id="phone" autocomplete="off" placeholder="输入手机号码" class="col-xs-10 col-sm-5 validate[required]"/>
                        <span class="lbl col-xs-12 col-sm-7"><span class="red">*</span>只能填写数字</span>
                    </div>
                </div>
                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 性别：  </label>
                    <div class="col-sm-10">
                        <label>
                            <input name="sex" type="radio" value="1" class="ace" checked />
                            <span class="lbl"> 男 </span>&nbsp;&nbsp;
                        </label>
                        <label>
                            <input name="sex" type="radio" value="2" class="ace" />
                            <span class="lbl"> 女 </span>
                        </label>
                    </div>
                </div>
                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-2 control-label no-padding-right" for="form-field-1 food"> 所属用户组： </label>
                    <div class="col-xs-12 col-sm-9">
                        <input type="hidden" name="group_id" id="group_id" required />
                        <select id="food" class="multiselect validate[required]" multiple="">
                            {foreach name="auth_group" item="v"}
                            <option value="{$v.id}">{$v.title}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 公司类别： </label>
                    <div class="col-sm-10">
                        <select id="user_type" name="user_type"  class="col-sm-4 selector validate[required]">
                            <option value="">请选择所属公司类别</option>
                            {foreach name="org_type" item="v"}
                            <option value="{$key}">{$v}</option>
                            {/foreach}
                        </select>
                        <span class="lbl col-xs-12 col-sm-7"><span class="red">*</span>必填</span>
                    </div>
                </div>
                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 组织机构： </label>
                    <div class="col-sm-10">
                        <select id="org_id" name="org_id"  class="col-xs-10 col-sm-5 selectpicker show-tick validate[required]"  width = "auto"  data-style="btn-success" data-live-search="true" data-live-search-placeholder="输入关键字检索总公司">
                            <option value="">请选择所属组织机构</option>
                        </select>
                    </div>
                </div>
                <div class="space-4"></div>

                <div class="form-group dept_hidden">
                    <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 部门： </label>
                    <div class="col-sm-10">
                        <select id="dept_id" name="dept_id"  class="col-sm-4 selector validate[required]">
                            <option value="">请选择所属部门</option>
                        </select>
                        <span class="lbl col-xs-12 col-sm-7"><span class="red">*</span>必填</span>
                    </div>
                </div>
                <div class="space-4"></div>

                <div class="form-group dept_hidden">
                    <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 职务： </label>
                    <div class="col-sm-10">
                        <select name="position"  class="col-sm-4 selector validate[required]" id="position">
                            <option value="">请选择所属职务</option>
                            {foreach name="position_list" item="v"}
                            <option value="{$v.id}">{$v.name}</option>
                            {/foreach}
                        </select>
                        <span class="lbl col-xs-12 col-sm-7"><span class="red">*</span>必填</span>
                    </div>
                </div>
                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 登录密码：  </label>
                    <div class="col-sm-10">
                        <input type="text" name="password" id="password" minlength="6" placeholder="输入登录密码" class="col-xs-10 col-sm-5 validate[required]"/>
                        <span class="lbl col-xs-12 col-sm-7"><span class="red">*</span>必填</span>
                    </div>
                </div>
                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 真实姓名：  </label>
                    <div class="col-sm-10">
                        <input type="text" name="name" id="name" placeholder="输入真实姓名" class="col-xs-10 col-sm-5 validate[required]"/>
                        <span class="lbl col-xs-12 col-sm-7"><span class="red">*</span>必填</span>
                    </div>
                </div>
                <div class="space-4"></div>

                <div class="clearfix form-actions">
                    <div class="col-md-offset-3 col-md-9">
                        <button class="btn btn-info" type="submit">
                            <i class="ace-icon fa fa-check bigger-110"></i>
                            保存
                        </button>

                        &nbsp; &nbsp; &nbsp;
                        <button class="btn" type="reset" id="reset">
                            <i class="ace-icon fa fa-undo bigger-110"></i>
                            重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div><!-- /.page-content -->

<script type="text/javascript">
    $('.form-horizontal').validationEngine('attach',{
        promptPosition: 'bottomLeft',
        addPromptClass: 'formError-white',
        showOneMessage: true
    }); 

    var group_id_arr = [];

    $(function() {
        $('#reset').click(function(){
            window.location.reload();
        });

        $('.multiselect').multiselect({
            enableFiltering: true,
            enableHTML: true,
            buttonClass: 'btn btn-white btn-primary',
            templates: {
                button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span> &nbsp;<b class="fa fa-caret-down"></b></button>',
                ul: '<ul class="multiselect-container dropdown-menu"></ul>',
                filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="fa fa-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
                filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default btn-white btn-grey multiselect-clear-filter" type="button"><i class="fa fa-times-circle red2"></i></button></span>',
                li: '<li><a tabindex="0"><label></label></a></li>',
                divider: '<li class="multiselect-item divider"></li>',
                liGroup: '<li class="multiselect-item multiselect-group"><label></label></li>'
            }
        })

        //公司类别，组织结构，所属部门三级联动
        $('#user_type').change(function() {
            // $('#org_id').html('<option value="">请选择所属组织机构</option>');
            // $('#dept_id').html('<option value="">请选择所属部门</option>');
            var org_type = $(this).select().val();
            if (org_type == 2){
               $(".dept_hidden").hide();
               $("#dept_id").removeClass("validate[required]");
               $("#position").removeClass("validate[required]");
            }else if(org_type == 1){
                $(".dept_hidden").show();
                $("#dept_id").addClass("validate[required]");
                $("#position").addClass("validate[required]");
            }
            if (org_type > 0) {
                $.ajax({
                    type: "POST",
                    url: '{:url("admin/Organize/getDataByType")}',
                    data: {'org_type': org_type},
                    dataType: "JSON",
                    success: function(result) {
                        var select_str = '<option value="">请选择所属组织机构</option>';
                        if (result.code == 200)
                        {
                            for (var i in result.data) {
                                select_str += '<option value="' + result.data[i].id + '">' + result.data[i].name + '</option>';
                            }
                        }
                        $('#org_id').html(select_str);
                        $('#org_id').selectpicker('refresh');
                    }
                })
            }
        });

        $('#org_id').change(function() {
            var org_id = $(this).select().val();
            if (org_id > 0) {
                $.ajax({
                    type: "POST",
                    url: '{:url("admin/Organize/getDeptTreeByOrgId")}',
                    data: {'org_id': org_id},
                    dataType: "JSON",
                    success: function(result) {
                        var select_str = '<option value="">请选择所属部门</option>';
                        if (result.code == 200)
                        {
                            for (var a in result.data) {
                                var aa = result.data[a];
                                select_str += '<option value="' + aa.this_id + '">' + '├' + aa.text + '</option>';
                                if(typeof aa.additionalParameters.children != "undefined"){
                                    for(var b in aa.additionalParameters.children){
                                        bb = aa.additionalParameters.children[b];
                                        select_str += '<option value="' + bb.this_id + '">' + '├─' + bb.text + '</option>';
                                        if(typeof bb.additionalParameters.children != "undefined"){
                                            for(var c in bb.additionalParameters.children){
                                                cc = bb.additionalParameters.children[c];
                                                select_str += '<option value="' + cc.this_id + '">' + '├──' + cc.text + '</option>';
                                                if(typeof cc.additionalParameters.children != "undefined"){
                                                    for(var d in cc.additionalParameters.children){
                                                        dd = cc.additionalParameters.children[d];
                                                        select_str += '<option value="' + dd.this_id + '">' + '├───' + dd.text + '</option>';
                                                        if(typeof dd.additionalParameters.children != "undefined"){
                                                            for(var e in dd.additionalParameters.children){
                                                                ee = dd.additionalParameters.children[e];
                                                                select_str += '<option value="' + ee.this_id + '">' + '├────' + ee.text + '</option>';
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }

                        }
                        $('#dept_id').html(select_str);
                    }
                })
            }
        });

    });

    function before_deal() {
        group_id_arr = [];
        $(".multiselect-container input[type=checkbox]:checked").each(function() {
            group_id_arr.push($(this).val());
        });
        $('#group_id').val(group_id_arr);
    }

</script>

{/block}